<script setup lang="ts">

import {useMenuStore} from "@/store/menusStroe.ts";
import {ElNotification, FormInstance,} from 'element-plus'
import {updateMenu} from "@/api/menu";
import {EditMenuItem} from "@/api/menu/type.ts";

const menuStore = useMenuStore()
const ruleFormRef = ref<FormInstance>()
const useMenu = useMenuStore()
const loading = ref(false)
const rules = ({
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
    {max: 10, message: '长度最大10个字符', trigger: 'blur'},
  ],
  permissions: [
    {required: true, message: '请输入权限标识', trigger: 'blur'},
  ],
  url: [
    {required: true, message: '请输入菜单路径', trigger: 'blur'},
  ],
  route_name: [{
    required: true, message: '请输入路由名称', trigger: 'blur'
  }],
  request_type: [{
    required: true, message: '请选择请求方式', trigger: 'blur'
  }],
  component: [
    {
      required: false,
      validator: (rule: any, value: any, callback: any) => {
        console.log(rule)
        if (!value) {
          // 如果值为空，则验证通过（因为required为false）
          callback();
        } else {
          // 正则表达式检查以.vue结尾且包含至少一个/
          const regex = /^\/.*\.vue$/;
          if (regex.test(value)) {
            callback(); // 验证通过
          } else {
            callback(new Error('组件路径必须以 ".vue" 结尾且包含至少一个 "/"'));
          }
        }
      },
      trigger: 'blur'
    }
  ],

  icon: [
    {required: true, message: '请输入菜单图标', trigger: 'blur'},
  ]
})

const formData = reactive<EditMenuItem>({
  ID: null,
  name: '',
  parent_id: "",
  parent_name: "",
  type: "",
  route_name: "",
  url: "",
  component: "",
  icon: "",
  request_type: "",
  level: "",
  sort: null,
  permissions: "",
})

const submitClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 验证成功
        const res = await updateMenu(formData)
        if (res.code === 200) {
          loading.value = false
          await menuStore.getMenuListStore()
          ElNotification({
            message: res.msg,
            type: 'success',
          })
          menuStore.editMenu_drawer = false
        } else {
          loading.value = false
          ElNotification({
            message: res.msg,
            type: 'error',
          })
        }
      } catch (error) {
        loading.value = false
      }
    }
  })
}

const clearClick = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onBeforeMount(() => {
  formData.level = menuStore.parentMenu.level
  formData.icon = menuStore.parentMenu.icon
  formData.ID = Number(menuStore.parentMenu.ID)
  formData.name = menuStore.parentMenu.name
  formData.permissions = menuStore.parentMenu.permissions
  formData.component = menuStore.parentMenu.component
  formData.parent_id = menuStore.parentMenu.parent_id
  formData.parent_name = menuStore.parentMenu.parent_name
  formData.url = menuStore.parentMenu.url
  formData.route_name = menuStore.parentMenu.route_name
  formData.request_type = menuStore.parentMenu.request_type
  formData.sort = Number(menuStore.parentMenu.sort)
})

</script>

<template>
  <div>
    <el-drawer v-model="useMenu.editMenu_drawer" size="35%">
      <template #header>
        <h4>编辑</h4>
      </template>
      <template #default>
        <el-form ref="ruleFormRef" :model="formData" :inline="true" label-width="auto" class="demo-ruleForm"
                 :rules="rules">
          <el-form-item label="ID">
            <el-input v-model="formData.ID" disabled/>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name" v-if="useMenu.editType ==1 ">
            <el-input v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="权限名称" prop="name" v-if="useMenu.editType ==2 ">
            <el-input v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="权限标识" prop="permissions" v-if="useMenu.editType==2">
            <el-input v-model="formData.permissions"/>
          </el-form-item>
          <el-form-item label="API名称" prop="name" v-if="useMenu.editType ==3 ">
            <el-input v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="父级" prop="parent_name">
            <el-input v-model="formData.parent_name" disabled/>
          </el-form-item>
          <el-form-item label="路径" prop="url" v-if="useMenu.editType==1 || useMenu.editType==3">
            <el-input v-model="formData.url"/>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="formData.sort"/>
          </el-form-item>
          <el-form-item label="路由名称" prop="route_name" v-if="useMenu.editType ==1">
            <el-input v-model="formData.route_name"/>
          </el-form-item>
          <el-form-item label="路由组件" prop="component" v-if="useMenu.editType ==1">
            <el-input placeholder="例:/views/home/Home.vue" v-model="formData.component"/>
          </el-form-item>
          <el-form-item label="图标" prop="icon" v-if="useMenu.editType ==1">
            <el-input placeholder="例:HomeFilled" v-model="formData.icon"/>
            <a href="https://element-plus.org/zh-CN/component/icon.html" target="_blank"
               style="color: blue; font-size: 12px;">
              选择图标
            </a>
          </el-form-item>
          <el-form-item label="请求类型" prop="request_type" v-if="useMenu.editType ==3">
            <el-select v-model="formData.request_type" placeholder="选择请求类型" style="width: 192px" clearable>
              <el-option label="GET" value="GET"/>
              <el-option label="POST" value="POST"/>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="clearClick(ruleFormRef)">还原</el-button>
          <el-button type="primary" :loading="loading" @click="submitClick(ruleFormRef)">提交</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">

</style>
